<template>
    <div class="login-container">
        <div class="login-wrapper">
            <h3 class="login-wrapper__title">内部财务税务核销系统 - 登录</h3>
            <div class="login-wrapper__main">
                <el-form 
                :model="loginForm" 
                :rules="loginRules" 
                ref="ruleForm">

                    <el-form-item prop="userName">
                        <el-input
                        type="text"
                        placeholder="请输入您的用户名"
                        suffix-icon="el-icon-user"
                        v-model="loginForm.userName">
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="pwd">
                        <el-input 
                        type="password"
                        placeholder="请输入登录密码"
                        suffix-icon="el-icon-lock"
                        v-model="loginForm.pwd">
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button
                        @click="handleLogin"
                         type="primary">
                            立即登录
                        </el-button>
                    </el-form-item>

                </el-form>
            </div>
            <p>
                没有账号？ 马上<span @click="goToRegister">注册一个账号吧</span>
            </p>
        </div>
    </div>
</template>

<script>
import { setLocalStorage, getLocalStorage } from '@assets/js/MyUtils';
export default {
   data () {
       return {
           loginForm: {
               userName: '',
               pwd: ''
           },
           loginRules: {
               userName: [
                   {
                        required: true, 
                        message: '用户名不能为空'
                   }
               ],
               pwd: [
                   {
                      required: true, 
                      message: '密码不能为空' 
                   }
               ]
           }
       }
   },
   methods: {
       // 登录事件
       handleLogin () {
           // 用户名密码不能为空
           if (!this.loginForm.userName || !this.loginForm.pwd) {
               this.$alert('提示', '用户名和密码不能为空!', {
                   confirmButtonText: '知道了'
               })
               return;
           };
           // 正常的登录逻辑
           if (this.loginForm.userName && this.loginForm.pwd) {
               this.fetchLogin();
               setLocalStorage('user','login success')
               this.$router.replace('/');
               this.loginForm.userName = '';
               this.loginForm.pwd = '';
           }
       },
       // 请求登录
       fetchLogin () {
           console.log('fetch login')
       },
       // 跳转注册页面
       goToRegister () {
           this.$router.push('/register')
       }
   }
}
</script>
<style lang='scss' scoped>

$login_wrapper_width: 300px;
$login_wrapper_height: 300px;

.login-container {
    width: 100%;
    height: 100%;
    background: $blue_color;
    position: relative;

    .login-wrapper {
        width: $login_wrapper_width;
        height: $login_wrapper_height;
        background: #fff;
        
        @include absolute-position (50%, 50%, -$login_wrapper_height/2, -$login_wrapper_height/2);

        &__title {
            @include font-style (20px, $black_color, 600);
            text-align: center;
            height: 50px;
            line-height: 50px;
        }

        &__main {
            padding: 15px;
        }

        p {
            @include font-style (16px, $black_color, 400);
            padding-left: 15px;

            span {
                @include font-style (16px, $blue_color, 400);

                &:hover {
                    cursor: pointer;
                    color: lighten($blue_color, 10%)
                }
            }
        }
    }
}

</style>